<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input  v-model="listQuery.Name" placeholder="活动名称" style="width: 150px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-input  v-model="listQuery.Time"  placeholder="活动关键词" style="width: 200px" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button  v-waves class="filter-item"   type="primary"  icon="el-icon-search" @click="handleFilter" style="margin-left:10px">
        查询
      </el-button> 
       <el-button class="filter-item"  type="primary"  @click="handleAddActive">
        添加活动
      </el-button> 
    </div>
    <el-table   v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%"  > 
       <el-table-column label="活动封面图" prop="Img">
        <template slot-scope="{ row }">
          <img :src="row.Img" width="150px"/>
        </template>
      </el-table-column> 
      <el-table-column label="活动名称" prop="Name" >
        <template slot-scope="{ row }">
          <span>{{ row.Name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动开始时间" prop="Stime">
        <template slot-scope="{ row }">
          <span>{{ row.Stime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活动结束时间" prop="Etime">
        <template slot-scope="{ row }">
          <span>{{ row.Etime }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { activeList } from "@/api/mdlist";
import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
  name: "activelist",
  components: { Pagination },
  directives: { waves },

  data() {
    return {  
      list:[],//列表
      Mdid:"",//门店id
      listLoading:false,
      total:0,
      listQuery: {
        page: 1,
        limit: 10,
        Name: undefined,
        Time: undefined,
      },
    };
  },
  created() {
   this.Mdid = this.$route.query.Mdid
   this.getList()
  },
  methods: {
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    
    //获取活动列表
    getList() {
      this.listLoading = true;
      activeList({Mdid:this.Mdid})
        .then((res) => {
          this.listLoading = false;
          if (res.list.length > 0) { 
            res.list.map((v)=> {
              v.Etime = parseTime(v.Etime)
              v.Stime = parseTime(v.Stime)
            })
            this.list = res.list
          }
        })
    },

    //添加活动
    handleAddActive(){
      this.$router.push({ name: "cbd-addactive" ,query: { Mdid: this.Mdid} });
    }
  },
};
</script>
